<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myMusic</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="shortcut icon" href="../img/beer.ico" type="image/x-icon">
</head>

<body>
    <div id="wrap">
        <!-- 第一部分，音乐图片 -->
        <div class="songImg">
            <img src="../img/01.png" alt="" data-rotate=0>
        </div>
        <!-- 第二部分，音乐信息 -->
        <div class="songInfo">
            <h2 class="name">听妈妈的话</h2>
            <div class="singer">周杰伦</div>
            <div class="album">依然范特西</div>
        </div>
        <!-- 第三部分，音乐进度条 -->
        <div class="progress">
            <div class="curTime">00:00</div>
            <div class="drag">
                <div class="circle"></div>
                <div class="frontBg"></div>
                <div class="backBg"></div>
            </div>
            <div class="totalTime">00:00</div>
        </div>
        <!-- 第四部分，音乐控制按钮 -->
        <ul class="control">
            <li class="liking"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 第五部分，音乐列表 -->
        <!-- <div class="list">
         
        </div> -->
    </div>
</body>
<!-- 暴露出window.$ -->
<script src="../js/zepto.min.js"></script>
<!-- 暴露出window.blurImg,传递两个参，一个是图片地址，一个是元素，不给默认是body -->
<script src="../js/gaussBlur.js"></script>
<!-- 渲染函数，暴露出window.render -->
<script src="../js/render.js"></script>
<!-- 加载音频标签 -->
<script src="../js/audio.js"></script>
<!-- 索引操作 -->
<script src="../js/indexControl.js"></script>
<!-- 列表控制 -->
<script src="../js/listControl.js"></script>
<script src="../js/progress.js">;</script>
<script src="../js/index.js"></script>

</html>